<template>
    <div class="search-input">
      <!-- 分类选择 -->
      <el-select
        v-model="selectedCategory"
        placeholder="分类"
        size="large"
        class="category-select"
      >
        <el-option
          v-for="item in categories"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 搜索框 -->
      <el-input
        v-model="searchQuery"
        placeholder="请输入关键词"
        size="large"
        @keyup.enter="onSearch"
        clearable
      />
      <!-- 搜索按钮 -->
      <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
    </div>
  </template>
  
  <script>
  import { ref, watch } from "vue";
  import { ElMessage } from "element-plus";
  export default {
    name: "SearchInput",
    props: {
      categories: {
        type: Array,
        required: true,
      },
      category: {
        type: String,
        required: true,
      },
    },
    emits: ["search", "update:category"],
    setup(props, { emit }) {
      // 定义响应式数据
      const searchQuery = ref(""); // 搜索关键词
      const selectedCategory = ref(props.category); // 当前选择的分类
  
      // 监听分类选择变化，触发双向绑定
      watch(selectedCategory, (newValue) => {
        emit("update:category", newValue);
      });
  
      // 搜索方法
      const onSearch = () => {
        if (!selectedCategory.value) {
        ElMessage.error("请选择一个分类"); // 使用 ElMessage 提示
        return;
        }
        if (!searchQuery.value) {
        ElMessage.error("请输入你要搜索的对象"); // 使用 ElMessage 提示
        return;
        }
        emit("search", searchQuery.value); // 向父组件传递搜索关键词
      };
  
      return {
        searchQuery,
        selectedCategory,
        onSearch,
      };
    },
  };
  </script>
  
  <style>
  .search-input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    gap: 10px;
  }
  .category-select {
    width: 100px;
  }
  .el-input {
    width: 400px;
  }
  </style>
  
  
  